<template>
  <view class='productList'>
    <uv-notify ref="notify" message="success" type="success"></uv-notify>
    <view class="body-page">
      <uv-gap height="10"/>
      <view class="product-info">
        <view class="title">
          <view :style="{'border-left':'5px solid '+themConfig.theme.color}" class="left"></view>
          选择拼团任务
        </view>
        <uv-scroll-list :indicatorActiveColor="themConfig.theme.color">
          <view v-for="(item, index) in taskInfos" :key="index" @click="selectTask(item,index)">
            <view style="margin: 0 10px">
              <uv-image :src="item.mainPic[0]" width="100" height="80" radius="10"/>
              <view :class="{'selected-task-text':index===selectTaskIndex}" style="margin: 5px 0">{{ item.taskName }}</view>
            </view>
          </view>
        </uv-scroll-list>
        <view v-if="selectTaskObj">
          <text class="taskName">已选拼团任务：{{ selectTaskObj.taskName }}</text>
          <uv-radio-group v-model="selectSkuRadioModel">
            <view style="display: flex;align-items: center">
            <view><text class="required">*</text>需选择：</view>
              <uv-radio
                  size="16"
                  @change="skuSelect($event,item)"
                  :activeColor="themConfig.theme.color"
                  :customStyle="{margin: '8px'}"
                  v-for="(item, index) in selectTaskObj.skus"
                  :key="index"
                  :label="item.name"
                  :name="item.name">
              </uv-radio>
              <view></view>

            </view>
          </uv-radio-group>
          <view v-if="selectSku">
            <view class="sku-info">
              <view>原价：¥
                <text>{{ selectSku.salesPrice }}</text>
              </view>
              <view>跑腿费：¥
                <text>{{ selectSku.salesPrice }}</text>
              </view>
            </view>

            <view class="sku-info" v-if="selectSku">
              <view style="display: flex;justify-content: space-between;align-items: center">
                <view>设置拼团价：</view>
                <uv-number-box button-size="20" :min="5" :step="0.5" disabledInput :max="10"
                               v-model="form.goodsInfos[0]['discountValue']"></uv-number-box>
                <view style="font-size: 13px;margin-left: -5px">折</view>
                <view>= {{ ((form.goodsInfos[0]['discountValue'] / 10) * selectSku.salesPrice).toFixed(2) }}</view>
              </view>
            </view>
            <view class="sku-info" v-if="selectSku">
              <view style="display: flex;justify-content: space-between;align-items: center">
                <view>设置跑腿费：</view>
                <uv-number-box button-size="20" :min="0" :step="0.5" disabledInput :max="999"
                               v-model="form.goodsInfos[0]['errandChargeAmount']"></uv-number-box>
              </view>
            </view>

            <view class="sku-info" v-if="selectSku">
              <view style="display: flex;justify-content: space-between;align-items: center">
                <view>最小成团数量：</view>
                <uv-number-box button-size="20" :min="1" :step="1" disabledInput :max="999"
                               v-model="form.goodsInfos[0]['minNumber']"></uv-number-box>
              </view>
            </view>

            <view class="sku-info" v-if="selectSku">
              <view style="display: flex;justify-content: space-between;align-items: center">
                <view>最大成团数量：</view>
                <uv-number-box button-size="20" :min="1" :step="1" disabledInput :max="999"
                               v-model="form.goodsInfos[0]['maxNumber']"></uv-number-box>
              </view>
            </view>
          </view>
        </view>
      </view>

      <uv-gap height="10" bgColor=""></uv-gap>
      <uv-form labelWidth="80" labelPosition="left" :model="form" :rules="rules" ref="form">

        <uv-form-item required label="拼团名称" prop="activityName" borderBottom>
          <uv-input v-model="form.activityName" placeholder="比如：下午5点场快递代取"></uv-input>
        </uv-form-item>

        <uv-form-item required label="拼团活动规则说明" prop="activityRule" borderBottom>
          <uv-textarea v-model="form.activityRule" placeholder="比如：当前跑腿团活动仅限于某某驿站取快递"></uv-textarea>
        </uv-form-item>

        <uv-form-item required label="任务地址" prop="actionAddress" borderBottom>
          <uv-input placeholder="例如：某某快递驿站和邮政驿站" v-model="form.actionAddress">
          </uv-input>
        </uv-form-item>


        <uv-form-item required label="发布身份"
                      prop="identityType"
                      borderBottom>
          <uv-radio-group v-model="form.identityType" iconPlacement="left" placement="row">
            <uv-radio :name="2" :activeColor="themConfig.theme.color" label="用户"></uv-radio>
            <uv-radio style="margin-left: 20px" :name="1" :activeColor="themConfig.theme.color" label="骑手"></uv-radio>
            <view class="identityType-tip">
              <li>用户身份，成团后骑手随机分配接单</li>
              <li>骑手身份发布，该团订单由当前骑手配送【认证接单后可用】</li>
            </view>
          </uv-radio-group>
        </uv-form-item>


        <uv-form-item label="自动接单" v-if="form.identityType==1" prop="groupSuccessAutoTake" borderBottom>
          <uv-switch :activeColor="themConfig.theme.color" v-model="form.groupSuccessAutoTake"></uv-switch>
          <text class="group-auto-tip">针对跑手身份发布有效，成团后该跑手针对该团订单自动接单</text>
        </uv-form-item>

        <uv-form-item label="自动成团" prop="finishAutoGroup" borderBottom>
          <uv-switch :activeColor="themConfig.theme.color" v-model="form.finishAutoGroup"></uv-switch>
          <text class="group-auto-tip">活动结束，如果未达到成团数量是否让订单成团，不成团则取消订单</text>
        </uv-form-item>



        <uv-form-item required label="活动结束时间" prop="endTime" borderBottom>
          <uv-datetime-picker :minDate="datetimePicker.minDate" :formatter="datePickerformatter" :maxDate="datetimePicker.maxDate"
                              ref="datetimePicker" v-model="datetimePicker.value" mode="datetime"
                              @confirm="checkExpireDate($event,'endTime')">
          </uv-datetime-picker>
          <view style="width: 100%">
            <view>
              <uv-input @focus="openDatePick('endTime')" border="bottom" placeholder="拼团活动结束时间" v-model="form.endTime">
              </uv-input>
            </view>
            <view style="display: flex;justify-content: center;margin-top: 20rpx;flex-wrap: wrap">
              <uv-button @click="setExpireTime(0.66)" style="margin: 20rpx" :color="themConfig.theme.color" text="40分钟后" plain
                         size="small"></uv-button>
              <uv-button @click="setExpireTime(1)" style="margin: 20rpx" :color="themConfig.theme.color" text="1小时后" plain
                         size="small"></uv-button>
              <uv-button @click="setExpireTime(3)" style="margin: 20rpx" :color="themConfig.theme.color" text="3小时后" plain
                         size="small"></uv-button>
              <uv-button @click="setExpireTime(5)" style="margin: 20rpx" :color="themConfig.theme.color" text="5小时后" plain
                         size="small"></uv-button>
              <uv-button @click="setExpireTime(10)" style="margin: 20rpx" :color="themConfig.theme.color" text="10小时后" plain
                         size="small"></uv-button>
              <uv-button @click="setExpireTime(24)" style="margin: 20rpx" :color="themConfig.theme.color" text="24小时后" plain
                         size="small"></uv-button>
            </view>
          </view>
        </uv-form-item>

        <uv-form-item required label="配送时间️" prop="deliveryTimeStart"
                      borderBottom>
          <uv-datetime-picker :minDate="datetimePicker.minDate" :formatter="datePickerformatter" :maxDate="datetimePicker.maxDate"
                              ref="deliveryTimeStart" v-model="datetimePicker.value" mode="datetime"
                              @confirm="checkExpireDate($event,'deliveryTimeStart')">
          </uv-datetime-picker>

          <uv-input inputAlign="left" @focus="openDatePick('deliveryTimeStart')" border="bottom" v-model="form.deliveryTimeStart"
                    placeholder="开始时间"></uv-input>

        </uv-form-item>
        <uv-form-item required label="配送时间️" prop="deliveryTimeEnd"
                      borderBottom>
          <uv-datetime-picker :minDate="datetimePicker.minDate" :formatter="datePickerformatter" :maxDate="datetimePicker.maxDate"
                              ref="deliveryTimeEnd" v-model="datetimePicker.value" mode="datetime"
                              @confirm="checkExpireDate($event,'deliveryTimeEnd')">
          </uv-datetime-picker>

          <uv-input inputAlign="left" @focus="openDatePick('deliveryTimeEnd')" border="bottom" v-model="form.deliveryTimeEnd"
                    placeholder="结束时间"></uv-input>
        </uv-form-item>

        <view class="agreement">
          <view>
            <uv-checkbox-group v-model="isReadAggreement">
              <uv-checkbox
                  shape="circle"
                  @change="agreementReadClick"
                  :activeColor="themConfig.theme.subColor"
                  :customStyle="{marginBottom: '8px'}"
                  v-for="(item, index) in [{name:'',value: 1}]"
                  :key="index" :label="item.name"
                  :name="item.value"
              ></uv-checkbox>
            </uv-checkbox-group>

          </view>
          <view class="agreementText">
            <text :style="{
                    color:themConfig.theme.subColor
                  }" @click="readAgreement">请阅读协议声明
            </text>
          </view>
        </view>

      </uv-form>

      <uv-gap height="80" bgColor=""></uv-gap>
    </view>
    <view class="button">
      <view class="submitBtn">
        <uv-button text="创建拼团跑腿任务" :disabled="btnDisabled" @click="submit"
                   :color="'linear-gradient(to right,' +themConfig.theme.subColor+', '+themConfig.theme.color+')'"></uv-button>
      </view>
    </view>
    <uv-picker ref="picker" :columns="useAddress" @confirm="useAddressConfirm"></uv-picker>
  </view>
</template>
<script>
import {mixins} from './index.js'

export default {
  components: {},
  mixins: [mixins]
}

</script>

<style scoped lang="scss">
@import './index.scss';
</style>
